<template>
  <div class="taskType">
    <!-- <headerSearch @change="changeFun"></headerSearch> -->
    <div style="width:100%;">
      <filterSelect @change="changeFun" />
    </div>
    <div v-if="user.code" class="container">
      <left-tree-table ref="leftTreeTable" @change="change" />
      <rightForm ref="rightForm" @save="save" />
    </div>
  </div>
</template>

<script>
import leftTreeTable from './components/leftTreeTable/index'
import rightForm from './components/rightForm/index'
import filterSelect from '@/components/filterSelect'
import { mapGetters } from 'vuex'
export default {
  name: 'TaskType',
  components: {
    leftTreeTable,
    rightForm,
    filterSelect
  },
  data() {
    return {
      refresh: 1
    }
  },
  computed: {
    ...mapGetters(['user'])
  },
  created() {
    console.log(this.user)
  },

  provide() {
    return {
      taskType: this
    }
  },

  methods: {
    getLeftTreeData() {
      return this.$refs.leftTreeTable.tableData
    },
    change(val) {
      console.log(val)
      if (!val || val.length === 0) {
        this.$refs.rightForm && this.$refs.rightForm.setData({})
      } else {
        // this.$refs.rightForm && this.$refs.rightForm.setRightFormTableShow(true)
        this.$refs.rightForm && this.$refs.rightForm.setData(val[0])
      }
    },
    changeFun(val) {
      console.log(val)
      const params = {
        tenantId: val
      }
      this.$refs.rightForm.setCurrentId(val)
      this.$refs.leftTreeTable.setTreeDataFun(params)
    },
    save(row) {
      this.$set(row, 'isAdd', false)
      this.change([row])
      // this.refresh++
    }
  }
}
</script>

<style lang="less" scoped>
.taskType {
  width: 100%;
  height: 100%;
  padding: 5px 10px;
  background-color:#fff;
  .container {
    margin-top: 10px;
    width: 100%;
    height: calc(100% - 40px);
    display: flex;
  }
}
</style>
